<template>
  <div class="special">
    <my-header>
      <template #left>
        <van-icon name="arrow-left" @click="$router.back()" />
      </template>
      <template #center> 严选专栏 </template>
    </my-header>
    <ul class="content">
        <li v-for="(item,index) in newList" :key="index" :style="{'background-image':`url(${item.pic})`}">
            <h5>{{item.title}}</h5>
            <p>{{item.descript}}</p>
            <button @click="$router.push(`/spedetail?id=${item.id}`)">查看详情</button>
        </li>
    </ul>
  </div>
</template>

<script>
import { getNews } from "@/api/home/index";
import { ref, reactive, toRefs } from "vue";
import myHeader from "../../components/myHeader.vue";
export default {
  components: { myHeader },
  setup() {
    const data = reactive({
      newList:[]
    })
    getNews().then(res => {
        data.newList = res.data
    })
    return{
      ...toRefs(data)
    }
  },
};
</script>
<style lang="scss" scoped>
.special {
  height: 100%;
  .content{
    height: calc(100% - 50px);
    overflow: auto;
    padding: 10px;
    li{
      height: 185px;
      background-size: 100% 100%;
      margin-bottom: 10px;
      color: #fff;
      text-align: center;
      font-size: 14px;
      overflow: hidden;
      h5{
        font-size: 18px;
        margin: 40px auto 20px;
      }
      p{
        width: 300px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin: 0 auto;
      }
      button{
        background: transparent;
        border: 1px solid #fff;
        border-radius: 20px;
        padding: 5px 10px;
        margin-top: 20px;
      }
    }
  }
}
</style>